<template>
  <root-portal v-if="visibleAsync">
    <uni-popup
      ref="popup"
      :type="type"
      :safe-area="false"
      mask-background-color="rgba(0,0,0,0.6)"
      @change="popupChange"
    >
      <view class="card border card-linear">
        <view
          v-if="showClose"
          class="card-header flex-justify-center"
          @click="close"
        >
          <text class="iconfont icon-arrow-down-filling text-primary"></text>
        </view>
        <view class="card-body">
          <slot></slot>
        </view>
      </view> </uni-popup
  ></root-portal>
</template>

<script>
  export default {
    props: {
      type: {
        type: String,
        default: "bottom",
      },
      visible: {
        type: Boolean,
        default: false,
      },

      showClose: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        visibleAsync: false,
      };
    },
    watch: {
      visible(newValue) {
        this.visibleAsync = newValue;
        if (newValue) {
          this.$nextTick(() => {
            this.$refs.popup.open();
            this.$emit("open");
          });
        } else {
          this.$nextTick(() => {
            this.$emit("close");
            this.$refs.popup.close();
          });
        }
      },
    },
    mounted() {
      this.visibleAsync = this.visible;
      if (this.visible) {
        this.$nextTick(() => {
          this.$refs.popup.open();
          this.$emit("open");
        });
      }

      uni.addInterceptor("navigateBack", {
        invoke: (res) => {
          this.close();

          return res;
        },
      });

      uni.addInterceptor("navigateTo", {
        invoke: (res) => {
          this.close();

          return res;
        },
      });

      uni.addInterceptor("redirectTo", {
        invoke: (res) => {
          this.close();

          return res;
        },
      });

      uni.addInterceptor("switchTab", {
        invoke: (res) => {
          this.close();

          return res;
        },
      });

      uni.addInterceptor("reLaunch", {
        invoke: (res) => {
          this.close();

          return res;
        },
      });
    },
    methods: {
      popupChange(e) {
        this.$emit("change", e.show);
        this.$emit("update:visible", e.show);
        if (e.show) {
          this.$emit("open");
        } else {
          this.$emit("close");
        }
      },

      close() {
        if (this.visibleAsync) {
          this.$refs.popup.close();
          this.visibleAsync = false;
        }
        this.$nextTick(() => {
          this.$emit("close");
          this.$emit("update:visible", false);
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  $width: 100%;
  $height: 70vh;

  .card {
    position: relative;
    width: $width;
    min-height: $height;
    max-height: calc(100vh - 240rpx);
    max-height: calc(100vh - 240rpx - constant(safe-area-inset-bottom));
    max-height: calc(100vh - 240rpx - env(safe-area-inset-bottom));
    border-radius: 20rpx 20rpx 0 0;
    border-bottom: 0;
    display: flex;
    flex-direction: column;
    &-body {
      overflow: auto;
      flex: 1;
    }
  }
</style>
